<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- Header -->
<header data-am-widget="header"
	class="am-header am-header-default am-header-fixed">
	<div class="am-header-left am-header-nav">
		<a id="window-back" href="javascript:void(0)" data-am-offcanvas> <i
			class="am-icon-chevron-left"></i> <span class="am-header-nav-title">找回密码</span>
		</a>
	</div>
	<h1 class="am-header-title"></h1>
</header>

<div style="height: 15px"></div>
<!-- login form -->
<div class="am-g">
	<div class="am-u-md-12 am-u-sm-centered">
		<form class="am-form my-form">
			<div id="verifyDiv">
				<fieldset class="am-form-set">
					<div class="am-form-group">
						<input id="mobile" type="text" name="mobile"
							placeholder="请输入您注册的手机号码" data-validation-message="手机格式不正确"
							pattern="^1((3|5|8){1}\d{1}|70)\d{8}$" required>
					</div>
					<div class="am-form-group">
						<input id="verifyCode" name="verifyCode" type="text"
							placeholder="输入收到的验证码" class="am-fl" style="width: 60%" required>
						<button id="ctBtn" type="button"
							class="am-btn am-btn-warning am-fr" style="width: 40%">获取验证码</button>
					</div>
				</fieldset>
				<button id="verifyBtn" type="button"
					class="am-btn am-btn-success am-btn-block">验证手机号</button>
			</div>

			<div id="resetPwdDiv" class="am-hide">
				<fieldset class="am-form-set">
					<div class="am-form-group">
						<input id="pwd" name="password" type="password" placeholder="密码"
							required>
					</div>
					<div class="am-form-group">
						<input name="repeatPwd" type="password" placeholder="重复密码"
							data-equal-to="#pwd" data-validation-message="必须与输入密码相同" required>
					</div>
				</fieldset>
				<button id="modifyPwdBtn" type="button"
					class="am-btn am-btn-success am-btn-block">修改密码</button>
			</div>
		</form>
	</div>
</div>
<script type="text/javascript">
	$(function() {

		$('.am-form')
				.validator(
						{
							onValid : function(validity) {
								$(validity.field).closest('.am-form-group')
										.find('.am-alert').hide();
							},

							onInValid : function(validity) {
								var $field = $(validity.field);
								var $group = $field.closest('.am-form-group');
								var $alert = $group.find('.am-alert');
								// 使用自定义的提示信息 或 插件内置的提示信息
								var msg = $field.data('validationMessage')
										|| this.getValidationMessage(validity);

								if (!$alert.length) {
									$alert = $(
											'<div class="am-alert am-alert-danger"></div>')
											.hide().appendTo($group);
								}

								$alert.html(msg).show();
							}
						});

		$('#ctBtn').click(function() {
			if ($('.am-form').data('amui.validator').isValid('#mobile')) {
				$.post('mobile/findPassword/send_sms', {
					mobile : $('#mobile').val()
				}, function(result) {
					if (result.code == 'ACK') {
						if (result.message == 'errorMsg') {
							showAlert(result.data);
						} else {
							execTime($('#ctBtn'));
						}
					}
				}, 'json');
			}
		});

		$('#verifyBtn').click(
				function() {
					var amValidator = $('.am-form').data('amui.validator');
					if (amValidator.isValid('#mobile')
							&& amValidator.isValid('#verifyCode')) {
						$.post('mobile/findPassword/verify_code', {
							mobile : $('#mobile').val(),
							verifyCode : $('#verifyCode').val()
						}, function(result) {
							if (result.code == 'ACK') {
								if (result.message == 'errorMsg') {
									showAlert(result.data);
								} else {
									$('#verifyDiv').addClass('am-hide');
									$('#resetPwdDiv').removeClass('am-hide');
									animation($('#resetPwdDiv'),
											[ 'am-animation-slide-left' ]);
								}
							}
						}, 'json');
					}
				});
		
		$('#modifyPwdBtn').click(function(){
			if($('.am-form').data('amui.validator').isFormValid()){
				$.post('mobile/findPassword/modify_Pwd', {
					mobile : $('#mobile').val(),
					pwd: $('#pwd').val()
				}, function(result) {
					if (result.code == 'ACK') {
						if(result.message == 'errorMsg'){
							showAlert(result.data);
						}else{
							showSuccessMsg(result.data, "mobile/selection");
						}
					}
				}, 'json');
			}
		});

	});
</script>